<template>
	<view class="container">
		<view class="records">
			<view class="record" v-for="(item, index) in recordList" :key="index">
				<view class="orderId row">
					<view class="font">订单号:</view>
					<view class="idInput">{{item.order_no}}</view>
				</view>
				<view class="status row">
					<view class="font">状态:</view>
					<view class="idInput">{{item.status_text}}</view>
				</view>
				<view class="selectSth row" v-for="(child, idx) in item.ids" :key="idx">
					<view class="detailOrder">
						<view class="detialImgBox">
							<img :src="child.image" class="img" style="width: 120rpx; height: 120rpx;"></img>
						</view>
						<view class="childItem">
							<view class="childName">{{child.name}}</view>
							<view class="childNum">数量: {{child.number}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getSthAdmin } from '@/api/index.js'
	
	export default {
		onLoad(){
			this.getList()
		},
		data() {
			return {
				recordList: [
					{orderID: 231, orderStatus: '已支付', child: [{childName: '奖品A', childNum: 1}]}
				]
			}
		},
		methods: {
			async getList() {
				let res = await getSthAdmin()
				console.log(res);
				this.recordList = res.data.data
				console.log(123,this.recordList);
			},
		
			
		}
	}
</script>

<style scoped>
	.records {
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.record {
		width: 90%;
		margin: 0 auto 20rpx;
		padding: 30rpx;
		
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.25);
		border-radius: 16rpx;
	}

	.row {
		display: flex;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.font {
		width: 180rpx;
		text-align: center;
		margin-right: 20rpx;
		font-weight: bold;
		color: #333;
	}

	.idInput {
		flex-grow: 1;
		padding: 10rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
		box-shadow: inset 0rpx 1rpx 4rpx rgba(0,0,0,0.1);
	}

	.detailOrder {
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		padding: 10rpx;
		background: #FAFAFA;
		border-radius: 10rpx;
		box-shadow: 0rpx 1rpx 3rpx rgba(0,0,0,0.1);
		margin: 0 auto;
	}

	.detialImgBox {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		overflow: hidden;
		border-radius: 10rpx;
		
	}

	.img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.childItem {
		flex-grow: 1;
	}

	.childName {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.childNum {
		font-size: 28rpx;
		color: #666;
	}
	
	.submitBtn{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #3c9cff;
		text-align: center;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #fff;
	}
</style>